<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="../internal.js"></script>
    <script type="text/javascript" src="../../../jquery.js"></script>
    <script type="text/javascript" src="../../../bootstrap/bootstrap.js"></script>
    <link rel="stylesheet" href="../../../bootstrap/bootstrap.css">
    <link rel="stylesheet" href="../../../bootstrap/bootstrap-responsive.css">
    <style type="text/css">
        * {
            color: #838383;
            margin: 0;
            padding: 0
        }

        html, body {
            font-size: 12px;
        }

        body {
            padding-left: 20px;
            padding-right: 20px;
        }
    </style>
</head>
<body>
<div id="tblwrap">
    <table class="table table-striped table-bordered" style="margin-top:18px;margin-bottom: 0;">
        <tr>
            <th><span>控件名称</span><span class="label label-important">*</span></th>
            <th><span>格式类型</span> <span style="float:right;"><a title="显示日历控件使用帮助" onclick="fnShowGuide();" class="btn"><i
                    class="icon-question-sign"></i></a></span></th>
        </tr>
        <tr>
            <td><input id="txtName" placeholder="必填项" type="text" size="20"/></td>
            <td>
                <select id="dateFormat" onchange="fnShowDef(this.value);">
                    <option value="yyyy-MM-dd">日期，形如：2010-09-09</option>
                    <option value="yyyy-MM-dd HH:mm:ss">日期，形如：2010-09-09 09:25:00</option>
                    <option value="">自定义格式</option>
                </select>
                <br/><br/>
                <blockquote>
                    <input type="text" id="def_format" style="display:none;" value="">
                </blockquote>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="input-prepend input-append">
                    <span class="add-on">宽</span><input style="display:inline;" id="txtWidth" size="3" type="text"><span
                        class="add-on">px</span> &nbsp;&nbsp;
                    <span class="add-on">高</span><input style="display:inline;" id="txtHeight" size="3"
                                                        type="text"><span class="add-on">px</span>&nbsp;&nbsp;
                </div>
            </td>
        </tr>
    </table>
</div>
<div style="display:none;margin-bottom: 27px;">
    <div class="page-header">
        <h3>日历控件帮助<span style="position: fixed;right: 20px;"><a title="回到控件属性页" onclick="fnShowGuide();" class="btn"><i
                class="icon-home"></i></a></span></h3>
    </div>
    <div>
        <blockquote>
            <p>日历控件实现如下图的效果：</p>
        </blockquote>
        <img src="helper/calendar/calendar.jpg"/>

        <p>另外，日历控件除了有供选择的输入格式外，还支持自定义的格式，自定义格式设置要求如下：</p><br/>
        <code>yMdHmswW</code><br/><br/>
        分别代表：年月日时分秒星期周,可以任意组合这些元素来自定义你个性化的日期格式。<br/><br/>
        日期格式表：<br/><br/>
        <table class="table table-bordered table-condensed table-striped">
            <thead>
            <tr>
                <th>格式</th>
                <th>说明</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><code>y</code></td>
                <td>
                    将年份表示为最多两位数字，如果年份多于两位数，则结果中仅显示两位低位数。
                </td>
            </tr>
            <tr>
                <td><code>yy</code></td>
                <td>
                    同上，如果小于两位数，前面补零。
                </td>
            </tr>
            <tr>
                <td><code>yyy</code></td>
                <td>
                    将年份表示为三位数字。如果少于三位数，前面补零。
                </td>
            </tr>
            <tr>
                <td><code>yyyy</code></td>
                <td>
                    将年份表示为四位数字。如果少于四位数，前面补零。
                </td>
            </tr>
            <tr>
                <td><code>M</code></td>
                <td>
                    将月份表示为从 1 至 12 的数字
                </td>
            </tr>
            <tr>
                <td><code>MM</code></td>
                <td>
                    同上，如果小于两位数，前面补零。
                </td>
            </tr>
            <tr>
                <td><code>MMM</code></td>
                <td>
                    返回月份的缩写 一月 至 十二月 (英文状态下 Jan to Dec) 。
                </td>
            </tr>
            <tr>
                <td><code>MMMM</code></td>
                <td>
                    返回月份的全称 一月 至 十二月 (英文状态下 January to December) 。
                </td>
            </tr>
            <tr>
                <td><code>d</code></td>
                <td>
                    将月中日期表示为从 1 至 31 的数字。
                </td>
            </tr>
            <tr>
                <td><code>dd</code></td>
                <td>
                    同上，如果小于两位数，前面补零。
                </td>
            </tr>
            <tr>
                <td><code>H</code></td>
                <td>
                    将小时表示为从 0 至 23 的数字。
                </td>
            </tr>
            <tr>
                <td><code>HH</code></td>
                <td>
                    同上，如果小于两位数，前面补零。
                </td>
            </tr>
            <tr>
                <td><code>m</code></td>
                <td>
                    将分钟表示为从 0 至 59 的数字。
                </td>
            </tr>
            <tr>
                <td><code>mm</code></td>
                <td>
                    同上，如果小于两位数，前面补零。
                </td>
            </tr>
            <tr>
                <td><code>s</code></td>
                <td>
                    将秒表示为从 0 至 59 的数字。
                </td>
            </tr>
            <tr>
                <td><code>ss</code></td>
                <td>
                    同上，如果小于两位数，前面补零。
                </td>
            </tr>
            <tr>
                <td><code>w</code></td>
                <td>
                    返回星期对应的数字 0 (星期天) - 6 (星期六) 。
                </td>
            </tr>
            <tr>
                <td><code>D</code></td>
                <td>
                    返回星期的缩写 一 至 六 (英文状态下 Sun to Sat) 。
                </td>
            </tr>
            <tr>
                <td><code>DD</code></td>
                <td>
                    返回星期的全称 星期一 至 星期六 (英文状态下 Sunday to Saturday) 。
                </td>
            </tr>
            <tr>
                <td><code>W</code></td>
                <td>
                    返回周对应的数字 (1 - 53) 。
                </td>
            </tr>
            <tr>
                <td><code>WW</code></td>
                <td>
                    同上，如果小于两位数，前面补零 (01 - 53) 。
                </td>
            </tr>
            </tbody>
        </table>
        示例：<br/><br/>
        <table class="table table-bordered table-condensed table-striped">
            <thead>
            <tr>
                <th>格式字符串</th>
                <th>值</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><code>yyyy-MM-dd HH:mm:ss</code></td>
                <td>2012-06-12 19:20:00</td>
            </tr>
            <tr>
                <td><code>yy年M月</code></td>
                <td> 12年8月</td>
            </tr>
            <tr>
                <td><code>yyyyMMdd</code></td>
                <td> 20080312</td>
            </tr>
            <tr>
                <td><code>现在是:yyyy 年M年d HH时mm分</code></td>
                <td> 现在是:2012 年8月12日 19时20分</td>
            </tr>
            <tr>
                <td><code>H:m:s</code></td>
                <td> 19:20:0</td>
            </tr>
            <tr>
                <td><code>y年</code></td>
                <td> 8年</td>
            </tr>
            <tr>
                <td><code>MMMM d, yyyy</code></td>
                <td> 三月 12, 2012</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script type="text/javascript">
    var oNode = null;
    window.onload = function () {
        //弹出窗口初始化函数，这里主要是判断是编辑下拉列表还是新增
        if (UE.plugins['calendar'].editdom) {
            oNode = UE.plugins['calendar'].editdom;
            $G('txtName').value = oNode.getAttribute('title');
            var sDateFmt = oNode.getAttribute('date_format');
            if (sDateFmt == null) {
                $G('dateFormat').value = "yyyy-MM-dd";
            } else if (sDateFmt == "yyyy-MM-dd") {
                $G('dateFormat').options[0].selected = true;
            } else if (sDateFmt == "yyyy-MM-dd HH:mm:ss") {
                $G('dateFormat').options[1].selected = true;
            } else {
                $G('dateFormat').value = "";
                $G('def_format').value = sDateFmt;
                $G('def_format').style.display = "";
            }
            var sWidth = oNode.style.width;
            $G('txtWidth').value = sWidth.substr(0, sWidth.length - 2);//这里的substr是为了去掉末尾的'px'
            var sHeight = oNode.style.height;
            $G('txtHeight').value = sHeight.substr(0, sHeight.length - 2);
        }
        $('#showTips').popover({placement: 'top'});
    }
    function fnShowDef(val) {
        $G("def_format").style.display = val == "" ? "" : "none";
    }
    function fnShowGuide() {
        $('#tblwrap').slideToggle().siblings().slideToggle();
    }
    dialog.oncancel = function () {
        if (UE.plugins['calendar'].editdom) {
            delete UE.plugins['calendar'].editdom;
        }
    };
    dialog.onok = function () {
        if ($G('txtName').value == '') {
            alert('控件名称不能为空');
            $G('txtName').focus();
            return false;
        }
        if (!oNode) {
            var sUrl = parent.getItemUrl;
            var nItemId = null;
            ajax.request(sUrl, {
                timeout: 60000, onsuccess: function (xhr) {
                    try {
                        nItemId = xhr.responseText;
                        oNode = document.createElement('input');
                        oNode.setAttribute('name', 'data_' + nItemId);
                        oNode.setAttribute('title', $G('txtName').value.replace("\"", "&quot;"));
                        if ($G('dateFormat').value == '') {
                            oNode.setAttribute('date_format', $G('def_format').value);
                        } else {
                            oNode.setAttribute('date_format', $G('dateFormat').value);
                        }
                        if ($G('txtWidth').value != '') {
                            oNode.style.width = $G('txtWidth').value + 'px';
                        } else {
                            oNode.style.width = '100px';
                        }
                        if ($G('txtHeight').value != '') {
                            oNode.style.height = $G('txtHeight').value + 'px';
                        } else {
                            oNode.style.height = '25px';
                        }
                        oNode.setAttribute('class', 'date');
                        oNode.setAttribute('className', 'date');
                        editor.execCommand('insertHtml', oNode.outerHTML);
                    } catch (e) {
                        alert('插入控件出错，请联系OA管理员解决 ');
                        return false;
                    }
                },
                error: function () {
                    alert('Request TimeOut');
                    return false;
                }
            })
        } else {
            if ($G('txtWidth').value != '') {
                oNode.style.width = $G('txtWidth').value + 'px';
            } else {
                oNode.style.width = '100px';
            }
            if ($G('txtHeight').value != '') {
                oNode.style.height = $G('txtHeight').value + 'px';
            } else {
                oNode.style.height = '25px';
            }
            oNode.setAttribute('title', $G('txtName').value.replace("\"", "&quot;"));
            if ($G('dateFormat').value == '') {
                oNode.setAttribute('date_format', $G('def_format').value);
            } else {
                oNode.setAttribute('date_format', $G('dateFormat').value);
            }
            delete UE.plugins['calendar'].editdom; //使用后清空这个对象，变回新增模式
        }
    };
</script>
</body>
</html>
